<template>
  <div id="app">
    <!-- 全局进度遮罩 -->
    <div v-show="show" class="progress-mask">
      <el-progress
        type="circle"
        :percentage="progress"
        :status="status"
        :width="120"
      >
        <template v-if="status === 'exception'">
          <el-icon><close-bold /></el-icon>
        </template>
      </el-progress>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("progress");
export default {
  name: "App",
  data() {
    return {};
  },
  computed: {
    ...mapState(["show", "progress"]),
    status() {
      return this.progress >= 100 ? "success" : null;
    },
  },
  methods: {},
};
</script>
<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.progress-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.el-progress {
  /* background: #fff; */
  /* color: blue; */
  /* padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
}
::v-deep .el-progress__text {
  color: red !important;
}
</style>
